<template>
  <div id="analyseEchart" style="width: 100%; height: 30vh;"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  components: {},
  props: {
    dataList: {
      type: Array,
      default: []
    }
  },
  name: 'analyseEchart',
  data() {
    return {
      myEchart1: '',
      power: [],
      count: [],
      xData: []
    }
  },
  computed: {},
  watch: {
    dataList: {
      // 自动触发,只能使用handler
      handler(newVal, oldVal) {
        this.getData()
      }
    }
  },
  // mounted() {
  //   this.getData()
  // },
  methods: {
    getData() {
      this.xData = []
      this.power = []
      this.count = []
      if (this.dataList) {
        this.dataList.forEach(item => {
          this.xData.push(item.countTime)
          this.power.push(item.sumPower)
          this.count.push(item.sumCount)
        })
      }
      this.openChart()
    },
    openChart() {
      this.$nextTick(function () {
        if (this.myEchart1 != null && this.myEchart1 != '' && this.myEchart1 != undefined) {
          // 销毁
          this.myEchart1.dispose()
        }
        this.myEchart1 = echarts.init(document.getElementById('analyseEchart'))

        const option = {
          color: ['#4788C8', '#5AD8A6'],
          dataZoom: [
            {
              moveOnMouseMove: true,
              type: 'slider',
              show: false,
              xAxisIndex: [0],
              start: 0,
              end: 30, //初始化滚动条
              minValueSpan: 6
            },
            {
              type: 'inside',
              xAxisIndex: 0,
              zoomOnMouseWheel: false, //滚轮是否触发缩放
              moveOnMouseMove: true, //鼠标滚轮触发滚动
              moveOnMouseWheel: true
            }
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            show: true,
            itemHeight: 12,
            itemWidth: 18,
            textStyle: {
              // 图例文字的样式
              color: '#666',
              fontSize: 13
            }
          },
          grid: {
            left: '3%',
            right: '3%',
            bottom: '0%',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#666'
            },
            data: this.xData
          },
          yAxis: [
            {
              type: 'value',
              name: '充电次数(次)',
              nameTextStyle: {
                color: '#666666',
                fontSize: 13
              },
              position: 'left',
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#F1F1F1'
                }
              },
              axisLabel: {
                color: '#666'
              }
            },
            {
              type: 'value',
              name: '充电电量(kwh)',
              nameTextStyle: {
                color: '#666666',
                fontSize: 13
              },
              position: 'right',
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#F1F1F1'
                }
              },
              axisLabel: {
                color: '#666'
              }
            }
          ],
          series: [
            {
              type: 'bar',
              name: '充电次数',
              yAxisIndex: 0,
              barWidth: 30,
              data: this.count
            },
            {
              type: 'line',
              symbol: 'circle',
              symbolSize: [8, 8],
              name: '充电电量',
              yAxisIndex: 1,
              data: this.power
            }
          ]
        }

        this.myEchart1.setOption(option)
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>